<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn" xml:lang="en">
	<head>
		<title>Flash OSMF Media Player</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css" media="screen">
		html, body {  background-color: #eee;}
		body {
			font-size:85%;
	margin:0;
	padding:0;
	background-color: #eee;
}

		#flashContent {  height:100%;float:left; }
		#ctl{width:30%;float:left;	background-color: #EEE;padding:1.5em;clear:right;}
		#ref{float:left;clear:both;margin:2em;background-color: #EEE;width:100%}
		</style>
	</head>
	<body>
<div id="warp">
	<div id="header">
		<h1>Flash Media Player Demo</h1>
		<hr/>
	</div>
	<div id="body">
	 <h2>一、基本调用</h2>
	 <p>有关如何调用播放器的内容，请查看源文件。</p>
	 <!--可以从这里开始复制，这段代码可以在网页中嵌入一个播放器-->
	<div id="flashContent">
				<!--下面一行可以设置播放器的宽度和高度，播放器默认的宽度是768，高度是454像素。-->
			  <object id="player"  classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="700" height="454" id="player" align="middle">
			    <param name="movie" value="player.swf" />
			    <param name="quality" value="high" />
			    <param name="bgcolor" value="#000" />
			    <param name="play" value="true" />
			    <param name="loop" value="true" />
			    <param name="wmode" value="window" />
			    <param name="scale" value="noscale" />
			    <param name="menu" value="true" />
			    <param name="devicefont" value="false" />
			    <param name="salign" value="tl" />
			    <param name="allowScriptAccess" value="sameDomain" />
			    <param name="allowFullScreen" value="true" />
          <!--可以在这里传参数给播放器，让它播放streamer指定的内容。可以是点播也可以是直播，注意需要确保url的格式正确-->
          <!--下面是一些可以用来测试的互联网资源，可以把它们替换到streamer中看看效果-->
          <!--一个rtmp的点播视频 : rtmp://cp67126.edgefcs.net/ondemand/mediapm/strobe/content/test/SpaceAloneHD_sounas_640_500_short      -->
          <!--一个http的flv 视频 : http://mediapm.edgesuite.net/strobe/content/test/AFaerysTale_sylviaApostol_640_500_short.flv           -->
          <!--一个rtmp的直播源   : rtmp://cp34973.live.edgefcs.net/live/Flash_Live_Benchmark@632         注意：live是应用名，Flash_Live_Benchmark@632是流的名称  -->
			    <param name="flashvars" value="width=400&height=100&streamer=rtmp://cp67126.edgefcs.net/ondemand/mediapm/strobe/content/test/SpaceAloneHD_sounas_640_500_short" />
			    <!--[if !IE]>-->
			    <!--这里用于确保播放器在各种浏览器中的兼容性，如果要保证在非ie浏览器下也能工作，必须使下面这部分代码与上面的保持一致-->
			   <object id="player" type="application/x-shockwave-flash" data="player.swf" width="500" height="400">
					<param name="movie" value="player.swf" />
					<param name="quality" value="high" />
					<param name="bgcolor" value="#000" />
					<param name="play" value="true" />
					<param name="loop" value="true" />
					<param name="wmode" value="window" />
					<param name="scale" value="noscale" />
					<param name="menu" value="true" />
					<param name="devicefont" value="false" />
					<param name="salign" value="tl" />
					<param name="allowScriptAccess" value="sameDomain" />
					<param name="allowFullScreen" value="true" />
			      <!--在这里也加入参数，使播放器在非IE浏览器中也能正常工作-->
			      <param name="flashvars" value="width=500&height=400&streamer=rtmp://cp67126.edgefcs.net/ondemand/mediapm/strobe/content/test/SpaceAloneHD_sounas_640_500_short" />
			      <!--<![endif]-->
			      <a href="http://www.adobe.com/go/getflash">
			        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
		          </a>
			      <!--[if !IE]>-->
		        </object>
			    <!--<![endif]-->
		      </object>
        </div>
	 <!--复制到这里结束，这段代码可以在网页中嵌入一个播放器-->
	 <div id="ctl" >
<!--====================================我是分割线。。================================================================-->

 <h2>二、使用javascript动态的指定播放的url</h2>
 <p>你可以在下面输入你希望播放的url然后单击播放。有关如何使用javascript动态控制播放的内容，请查看源文件^.^</p>
<!--如果要使用这个功能，必须先加上如下这段脚本,可以从这里开始复制-->
	<script   type="text/javascript" >      
  	        function play(stream )     
    	      {     
    	      <!--需要注意的是这里会根据id来找到我们的播放器，所以确保这里的名字跟object标签的id属性保持一致-->
      	       var myPlayer=document.getElementById("player");     
        	     myPlayer.playStream(stream);
          	}  
          	function stop()
          	{
          		var myPlayer=document.getElementById("player");     
        	     myPlayer.stopStream();
          	}
</script> 
<!--复制到这里结束-->


URL:<input id="stream" type="text" value="http://mediapm.edgesuite.net/strobe/content/test/AFaerysTale_sylviaApostol_640_500_short.flv"/>
<input type="button" onclick="onButtonClick()" value="播放">
<input type="button" onclick="stop()" value="停止">
<!--  调用play()函数的方法也很简单,如下。  -->
<script   type="text/javascript" >      
          function onButtonClick( )     
          {     
             var stream=document.getElementById("stream").value;
             <!--alert(stream);-->  
             play(stream);     
          }  

</script>
<br/>
<!--====================================我是分割线。。================================================================-->
<hr/>
	<br/>
<h3>三、使用javascript向播放器中添加右键菜单</h3>
<p>这个也很简单，详情请查看源文件。</p>

<!--如果要使用这个功能，必须先加上如下这段脚本,可以从这里开始复制-->
	<script   type="text/javascript" >      
  	        function addMenuItem(menuItemName,url )     
    	      {     
      	       var myPlayer=document.getElementById("player");     
        	     myPlayer.addMItem(menuItemName,url);
          	}   
          	
          	function clearContextMenu()     
    	      {     
      	       var myPlayer=document.getElementById("player");     
        	     myPlayer.clearContextMenu();
          	}  
</script> 
<!--复制到这里结束-->

菜单名字:<input id="mname" type="text" value="直播流">  <br/>
对应的URL<input id="surl" type="text" value="rtmp://cp34973.live.edgefcs.net/live/Flash_Live_Benchmark@632" >
<input type="button" onclick="onAddMenuClick()" value="添加到播放器">
<input type="button" onclick="onClearMenuClick()" value="移除右键菜单">
	<!--  调用addMenuItem()函数的方法也很简单,如下。  -->
<script   type="text/javascript" >      
          function onAddMenuClick( )     
          {     
             var mname=document.getElementById("mname").value;
             var surl=document.getElementById("surl").value;
             addMenuItem(mname,surl);  
             alert("添加右键菜单成功，你可以在播放器上单击右键查看效果也可以继续添加。当你点击某个菜单项的时候，播放器会切换到对应的流来播放。");
          }  
          function onClearMenuClick( )     
          {     
             clearContextMenu();  
             alert("删除成功。");
          }  
</script>
<!--====================================我是分割线。。================================================================-->
<hr/>
	<br/>
<h3>四、使用javascript向播放器中加入笔录</h3>

<!--如果要使用这个功能，必须先加上如下这段脚本,可以从这里开始复制-->
	<script   type="text/javascript" >      
  	        function setBilu(url,soName )     
    	      {     
      	       var myPlayer=document.getElementById("player");     
        	     myPlayer.setBilu(url,soName);
          	}  
</script> 
<!--复制到这里结束-->

URL:<input id="biluUrl" type="text" value="rtmp://192.168.1.105/text">  <br/>
共享对象名称:<input id="soName" type="text" value="bilu" >
<input type="button" onclick="onAddBiluClick()" value="加入笔录"><br/>
<a href="writer.html" target="new">点此进入笔录输入页面</a>
	<!--  调用addMenuItem()函数的方法也很简单,如下。  -->
<script   type="text/javascript" >      
          function onAddBiluClick( )     
          {     
             var biluUrl=document.getElementById("biluUrl").value;
             var soName=document.getElementById("soName").value;
             setBilu(biluUrl,soName);  
             alert("添加笔录成功，你可以在播放器上单击笔录按钮查看笔录。");
          }  
</script>
<!--====================================我是分割线。。================================================================-->
<hr/>
	<br/>
<h3>五、设置播放器的宽和高</h3>

<!--如果要使用这个功能，必须先加上如下这段脚本,可以从这里开始复制-->
	<script   type="text/javascript" >      
  	        function setWidthAndHeight(w ,h)     
    	      {     
      	       var myPlayer=document.getElementById("player");     
        	     myPlayer.setWidthAndHeight(w,h);
          	} 
            
</script> 
<!--复制到这里结束-->

width:<input id="tw" type="text" value="400">  <br/>
height:<input id="th" type="text" value="300" >
<input type="button" onclick="onResize()" value="设置大小"><br/>

<script   type="text/javascript" >      
          function onResize( )     
          {     
             var w=document.getElementById("tw").value;
             var h=document.getElementById("th").value;
             setWidthAndHeight (w,h);
          }  
</script>
	<!--====================================我是分割线。。================================================================-->
<hr/>
	<br/>
<h3>六、设置BufferTime</h3>

<!--如果要使用这个功能，必须先加上如下这段脚本,可以从这里开始复制-->
	<script   type="text/javascript" >      
  	        function setBufferTime(bt)     
    	      {     
      	       var myPlayer=document.getElementById("player");     
        	     myPlayer.setBufferTime(bt);
          	} 
          
</script> 
<!--复制到这里结束-->

Buffer Time:<input id="bt" type="text" value="5">  <br/>
<input type="button" onclick="onSetBT()" value="确定"><br/>

<script   type="text/javascript" >      
          function onSetBT( )     
          {     
             var bt=document.getElementById("bt").value;
             setBufferTime(bt); 
          }  
</script>
</div>
<div id="ref">
	<h2>参考资料</h2>
	<p>
		OSMF 官网：
 <a href="http://opensource.adobe.com/wiki/display/osmf/Open+Source+Media+Framework">http://opensource.adobe.com/wiki/display/osmf/Open+Source+Media+Framework</a><br/>
 <a href="http://www.opensourcemediaframework.com/">http://www.opensourcemediaframework.com/</a><br/>
 <br/>
OSMF 相关介绍：<br/>
 介绍：<a href="http://www.7yue.com/post/417.html">http://www.7yue.com/post/417.html</a><br/>
 OSMF 第一步：<a href="http://www.7yue.com/post/419.html">http://www.7yue.com/post/419.html</a><br/>
 OSMF 第二步：<a href="http://www.7yue.com/post/426.html">http://www.7yue.com/post/426.html</a><br/>
 相关 PPT：<a href="http://www.slideshare.net/rblank9/standardize-your-flash-with-adobe-osmf-09?from=ss_embed">http://www.slideshare.net/rblank9/standardize-your-flash-with-adobe-osmf-09?from=ss_embed</a><br/>

如果要改变播放器的大小和外观，可以参考这篇文章:<a href="http://www.adobe.com/devnet/flash/articles/osmf-media-player.html">http://www.adobe.com/devnet/flash/articles/osmf-media-player.html</a><br/>
如果要修改播放器的源文件，必须使用Flash CS5。关于下载和破解Flash CS5可以参考这篇文章:<a href="http://www.yzznl.cn/archives/adobe-cs5-universal-crack-method.html">http://www.yzznl.cn/archives/adobe-cs5-universal-crack-method.html</a>
		</p>
		<hr/>
	</div>
        </div>
</div>
<div style="float:left;clear:both;height:100px;" ><br/><br/><br/></div>
</body>
</html>  